<template>
    <div class="login_container">
        <div class="login_box">
            <p>寒衣补助</p>
            <!-- 登录表单区域 -->
            <el-form :model="user" ref="loginForm" :rules="rules">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input placeholder="工号" v-model="user.username" ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input placeholder="姓名" v-model="user.password" ></el-input>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-row :gutter="24">
                      <el-col :span="12"><el-button type="primary" @click="userLogin" :loading="loginLoading">登录</el-button></el-col>
                      <el-col :span="12"><el-button type="success" v-on:click="noLogin">游客登录</el-button></el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <p ref="xxx"></p>
        </div>
    </div>
</template>

<script>
import { userLogin } from '@api/user'
export default {
  name: 'login',
  data: function () {
    var validateName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入数据'))
      }
      callback()
    }
    return {
      loginLoading: false,
      user: {
        username: 'admin',
        password: 'admin'
      },
      rules: {
        username: [
          {required: true, message: '输入数据', trigger: 'blur'}
        ],
        name: [
          {validator: validateName, trigger: 'blur'}
        ]
        // 电话： 可以不输入，但是如果输入，就必须符合11位
      }
    }
  },
  methods: {
    userLogin () {
      let that = this
      console.info(that)
      // this.$refs['loginForm']
      // session.user.name  === session.user['name']
      that.$refs.loginForm.validate((flag) => {
        if (flag) {
          that.loginLoading = true
          userLogin(this.user).then(res => {
            // 这个结果就是后端返回的数据
            // res.data什么时候是false false null '' 未定义
            if (res.data) {
              // 重新获取当前用户的操作
              // store.dispatch('user/fetchUserInfo').then(res => {
              //   // 跳转
              //   this.$message({
              //     message: '登录成功',
              //     type: 'success',
              //     duration: 1500,
              //     onClose: function () {
              //       that.loginLoading = false
              //       that.$router.push({path: '/main'})
              //     }
              //   })
              // })
              this.$message({
                message: '登录成功',
                type: 'success',
                duration: 1500,
                onClose: function () {
                  that.loginLoading = false
                  that.$router.push({path: '/main'})
                }
              })
            } else {
              // 错误提示
              that.$message({
                message: '用户名或密码错误',
                type: 'error',
                duration: 1500
              })
              that.loginLoading = false
            }
          })
        }
        return false
      })
    },
    noLogin () {
      let that = this
      that.$ref().then(res => {
        that.$router.push({path: '/main'})// $router利用路由跳转页面
      })
    }
  }
}
</script>
<style scoped>
    .login_container {
        background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
        /*background-image: url("../images/bg_login.png");*/
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
    }
    .login_box {
        width: 290px;
        height: 350px;
        /* background-color: #fff; */
        background-color: #2e527bb3;
        border-radius: 5px;

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .el-form {
        padding: 32px;
        position: absolute;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .el-button {
        width: 100%;
    }
    .code {
        width: 45%;
    }
    img {
        /* style="width: 100px; height: 30px; margin-left:5px;vertical-align: middle;" */
        display: inline;
        width: 45%;
        height: 28px;
        margin-left: 10px;
        vertical-align: middle;
        border-radius: 3px;
    }
    .rememberMe {
        color: #fff;
    }
</style>
